﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>分页导航 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#pagination-navigation" class="nav-link font-weight-bold"><span>分页导航(Pagination Navigation)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#page-link-and-number-generation" class="nav-link"><span>页面链接和编号生成</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#router-links" class="nav-link"><span>路由器链接</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#link-generator-function" class="nav-link"><span>链接生成器功能</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#page-number-generation" class="nav-link"><span>页码生成</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#providing-an-array-of-pages" class="nav-link"><span>提供页面数组</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#customizing-appearance" class="nav-link"><span>自定义外观</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#limiting-the-number-of-displayed-buttons" class="nav-link"><span>限制显示按钮的数量</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#button-content" class="nav-link"><span>按钮内容</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#goto-firstlast-button-type" class="nav-link"><span>转到第一个/最后一个按钮类型</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#button-size" class="nav-link"><span>按钮大小</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#pill-style" class="nav-link"><span>Pill 样式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#alignment" class="nav-link"><span>对齐</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#auto-current-page-detection-and-v-model-support" class="nav-link"><span>自动当前页检测和v-model支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>可访问性</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#aria-labels" class="nav-link"><span>ARIA 标签</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#keyboard-navigation" class="nav-link"><span>键盘导航</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-pagination-nav" class="nav-link"><span>&lt;b-pagination-nav&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>

</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">分页导航</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">分页导航(Pagination Navigation)</h1>
<p class="bd-lead">快速第一，上一，下一，最后和页面按钮，用于基于导航的分页，支持常规链接或路由器链接。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>









<nav data-v-811345e6="" class="bd-quick-links mb-3 d-xl-none">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#page-link-and-number-generation" class=""><span data-v-811345e6="">Page link and number generation</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#router-links" class=""><span data-v-811345e6="">Router links</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#link-generator-function" class=""><span data-v-811345e6="">Link generator function</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#page-number-generation" class=""><span data-v-811345e6="">Page number generation</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#providing-an-array-of-pages" class=""><span data-v-811345e6="">Providing an array of pages</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#customizing-appearance" class=""><span data-v-811345e6="">Customizing appearance</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#limiting-the-number-of-displayed-buttons" class=""><span data-v-811345e6="">Limiting the number of displayed buttons</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#button-content" class=""><span data-v-811345e6="">Button content</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#goto-firstlast-button-type" class=""><span data-v-811345e6="">Goto first/last button type</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#button-size" class=""><span data-v-811345e6="">Button size</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pill-style" class=""><span data-v-811345e6="">Pill style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alignment" class=""><span data-v-811345e6="">Alignment</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-current-page-detection-and-v-model-support" class=""><span data-v-811345e6="">Auto current page detection and v-model support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#aria-labels" class=""><span data-v-811345e6="">ARIA labels</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#keyboard-navigation" class=""><span data-v-811345e6="">Keyboard navigation</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span data-v-811345e6="">See also</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-pagination-nav" class=""><span data-v-811345e6="">&lt;b-pagination-nav&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>
  <code translate="no" class="notranslate text-nowrap">b-pagination-nav</code>将尝试根据当前页面的URL
  （通过<code translate="no" class="notranslate text-nowrap">$route</code> detection或
  （如果未检测到<code translate="no" class="notranslate text-nowrap">$router</code>）浏览器位置URL）自动检测哪个页面链接是活动页面按钮。
</p>
<p><strong>注意:</strong> <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code> 
  用于导航到新页面url。要控制页内组件分页（如表或列表分页），
  请改用<a href="../../../bootstrap-vue/docs/components/pagination" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-pagination&gt;</code></a>组件。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-lead notranslate">
<div class="overflow-auto">
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item active"><a href="../../../bootstrap-vue/docs/components/pagination-nav" class="page-link nuxt-link-exact-active nuxt-link-active" role="menuitemradio" aria-label="Go to page 1" aria-checked="true" aria-posinset="1" aria-setsize="10" tabindex="0">1</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=2" class="page-link" role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1">2</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=3" class="page-link" role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=4" class="page-link" role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=2" class="page-link" role="menuitem" tabindex="-1" aria-label="Go to next page">›</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=10" class="page-link" role="menuitem" tabindex="-1" aria-label="Go to last page">»</a></li>
</ul>
</nav>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">:link-gen</span>=<span class="hljs-string">"linkGen"</span> <span class="hljs-attr">:number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">use-router</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      linkGen(pageNum) {
        <span class="hljs-keyword">return</span> pageNum === <span class="hljs-number">1</span> ? <span class="hljs-string">'?'</span> : <span class="hljs-string">`?page=<span class="hljs-subst">${pageNum}</span>`</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>是提供导航分页的自定义输入组件。
  用页数属性设置的总<code translate="no" class="notranslate text-nowrap">页数</code>。页码是从1到<code translate="no" class="notranslate text-nowrap">页数</code>的索引。
</p>
<h2 id="page-link-and-number-generation" class="bv-no-focus-ring"><span class="bd-content-title">页面链接和编号生成<a class="anchorjs-link" href="#page-link-and-number-generation" aria-labelledby="page-link-and-number-generation"></a></span></h2>
<p>
  默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>生成<code translate="no" class="notranslate text-nowrap">基本url</code>标记，将ref属性设置为与页码连接的基本url。<code translate="no" class="notranslate text-nowrap">基本url</code>属性默认为“/”。<code translate="no" class="notranslate text-nowrap">页数</code>是通过页数属性指定的。<code translate="no" class="notranslate text-nowrap">页数</code>是从<code translate="no" class="notranslate text-nowrap">1</code>到页数的数字。
</p>
<h3 id="router-links" class="bv-no-focus-ring"><span class="bd-content-title">路由器链接<a class="anchorjs-link" href="#router-links" aria-labelledby="router-links"></a></span></h3>
<p>
  要将页面链接生成为 <a href="https://router.vuejs.org/api/#router-link" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">&lt;router link&gt;</code></a>组件
  （或者如果检测到<a href="https://nuxtjs.org/" target="_blank" rel="noopener">Nuxt.js</a>
  则生成<a href="https://nuxtjs.org/api/components-nuxt-link#the-lt-nuxt-link-gt-component" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">&lt;nuxt-link&gt;</code></a>），
  请设置<code translate="no" class="notranslate text-nowrap">use-router</code>属性。然后，HREF将成为路由器链接的<code translate="no" class="notranslate text-nowrap">to</code>属性。
  或者，可以选择使用链接生成器函数将路由器链接返回到<a href="https://router.vuejs.org/api/#to" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap"></code> 位置</a>对象。
</p>
<p>
  如果在应用程序中未检测到<code translate="no" class="notranslate text-nowrap">$router</code>，
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>将回退到常规的 <code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>元素，
    并且任何 <code translate="no" class="notranslate text-nowrap">to</code> location对象将转换为标准URL（如果可能）。
<p>支持以下路由器链接特定的属性：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">active-class</code></li>
<li><code translate="no" class="notranslate text-nowrap">exact</code></li>
<li><code translate="no" class="notranslate text-nowrap">exact-active-class</code></li>
<li><code translate="no" class="notranslate text-nowrap">no-prefetch</code> (<code translate="no" class="notranslate text-nowrap">&lt;nuxt-link&gt;</code> 特殊属性)</li>
</ul>
<p>
  有关上述道具的详细信息，请参阅<a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">路由器链接支持</a>参考部分。
</p>
<h3 id="link-generator-function" class="bv-no-focus-ring"><span class="bd-content-title">链接生成器功能<a class="anchorjs-link" href="#link-generator-function" aria-labelledby="link-generator-function"></a></span></h3>
<p>
  如果需要对生成的链接url进行更细粒度的控制或将<code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code> 设置为props，
  则可以将<code translate="no" class="notranslate text-nowrap">link-gen</code>属性设置为接收两个参数的函数引用：页码和包含两个字段
  （<code translate="no" class="notranslate text-nowrap">link</code>和
  <code translate="no" class="notranslate text-nowrap">page</code>）的对象，其中<code translate="no" class="notranslate text-nowrap">page</code>是页码，
  <code translate="no" class="notranslate text-nowrap">link</code>是内部生成的链接。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">link-gen</code>函数应该返回一个字符串（用于ref）或一个路由器到对象。
  如果返回的值是一个对象，则始终会生成路由器链接（如果检测到<code translate="no" class="notranslate text-nowrap">$router</code>）。
  如果返回值是字符串，则默认情况下会生成标准链接，除非设置了<code translate="no" class="notranslate text-nowrap">use-router</code>属性。
  如果使用了<code translate="no" class="notranslate text-nowrap">to</code> location对象，那么 <code translate="no" class="notranslate text-nowrap">基本url</code>属性将不起作用。
</p>
<!-- eslint-disable no-dupe-keys -->

<figure class="highlight"><pre class="hljs js text-monospace p-2 notranslate" translate="no"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">methods</span>: {
    <span class="hljs-comment">// For regular HREF (or string `to` prop if `use-router` is set)</span>
    linkGen(pageNum) {
      <span class="hljs-keyword">return</span> <span class="hljs-string">`/foo/page/<span class="hljs-subst">${pageNum}</span>`</span>
    },

    <span class="hljs-comment">// Returning a router-link `to` object</span>
    linkGen(pageNum) {
      <span class="hljs-keyword">return</span> { <span class="hljs-attr">path</span>: <span class="hljs-string">`/foo/page/<span class="hljs-subst">${pageNum}</span>`</span> }
    },

    <span class="hljs-comment">// Returning a router-link `to` object with query parameters</span>
    linkGen(pageNum) {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">path</span>: <span class="hljs-string">'/foo/'</span>,
        <span class="hljs-attr">query</span>: { <span class="hljs-attr">page</span>: pageNum }
      }
    },

    <span class="hljs-comment">// Returning a router-link `to` object with named route and parameters</span>
    linkGen(pageNum) {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">name</span>: <span class="hljs-string">'posts'</span>,
        <span class="hljs-attr">params</span>: { <span class="hljs-attr">post</span>: pageNum }
      }
    }
  }
}</pre></figure>
<p><strong>注意:</strong> 
  当从<code translate="no" class="notranslate text-nowrap">to</code> location对象返回到标准链接时（当没有可用的<code translate="no" class="notranslate text-nowrap">$router</code>时），只有以下位置属性用于生成URL：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">path</code> (如果未提供，则默认为页面的当前URL路径)</li>
<li><code translate="no" class="notranslate text-nowrap">query</code></li>
<li><code translate="no" class="notranslate text-nowrap">hash</code> (如果使用，必须包含前导<code translate="no" class="notranslate text-nowrap">#</code>)</li>
</ul>
<p>
  不支持 <code translate="no" class="notranslate text-nowrap">名称</code>路由和 <code translate="no" class="notranslate text-nowrap">参数</code>的转换。
</p>
<h3 id="page-number-generation" class="bv-no-focus-ring"><span class="bd-content-title">页码生成<a class="anchorjs-link" href="#page-number-generation" aria-labelledby="page-number-generation"></a></span></h3>
<p>
  默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>在页面链接按钮中呈现页码（1-N）。
  您可以通过向<code translate="no" class="notranslate text-nowrap">page-gen</code>属性提供函数引用来重写此行为。函数引用应该接受一个单独的参数，即页码（1-N）。
  <code translate="no" class="notranslate text-nowrap">page-gen</code>函数应该返回一个字符串。
</p>
<p><strong>注意:</strong> 
  <strong>不</strong>支持生成的页码字符串中的HTML内容。对于基本HTML，可以使用作用域槽页进行更细粒度的格式化。
</p>
<p><strong>示例：使用链接数组生成分页：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-links notranslate">
<div class="overflow-auto">
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="4" tabindex="0" href="#foo" class="page-link">foo</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="4" tabindex="-1" href="#bar" class="page-link">bar</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="4" tabindex="-1" href="#baz" class="page-link">baz</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="4" tabindex="-1" href="#faz" class="page-link">faz</a></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
      <span class="hljs-attr">:link-gen</span>=<span class="hljs-string">"linkGen"</span>
      <span class="hljs-attr">:page-gen</span>=<span class="hljs-string">"pageGen"</span>
      <span class="hljs-attr">:number-of-pages</span>=<span class="hljs-string">"links.length"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">links</span>: [<span class="hljs-string">'#foo'</span>, <span class="hljs-string">'#bar'</span>, <span class="hljs-string">'#baz'</span>, <span class="hljs-string">'#faz'</span>]
      }
    },
    <span class="hljs-attr">methods</span>: {
      linkGen(pageNum) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.links[pageNum - <span class="hljs-number">1</span>]
      },
      pageGen(pageNum) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.links[pageNum - <span class="hljs-number">1</span>].slice(<span class="hljs-number">1</span>)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="providing-an-array-of-pages" class="bv-no-focus-ring"><span class="bd-content-title">提供页面数组<a class="anchorjs-link" href="#providing-an-array-of-pages" aria-labelledby="providing-an-array-of-pages"></a></span></h3>
<p>
  您可以通过<code translate="no" class="notranslate text-nowrap">pages</code>属性传递一个链接数组，而不是使用 Rather than using <code translate="no" class="notranslate text-nowrap">页数</code>来自动生成页面链接。
  当<code translate="no" class="notranslate text-nowrap">pages</code>属性的数组长度为<code translate="no" class="notranslate text-nowrap">1</code>或更大时，它将用于生成页面链接。
</p>
<p>数组可以是以下两种格式之一：</p>
<ul>
<li>
  字符串数组，其中每个条目都是一个链接。 在这种模式下，页面按钮的编号将自动设置为<code translate="no" class="notranslate text-nowrap">1</code> 至阵列中的条目数。
</li>
<li>
  对象数组，其中每个对象有两个字段：链接（必需）和文本（可选）。链接可以是指定链接的字符串，也可以是to location对象。文本将是页面链接按钮的内容。如果省略文本，则页面按钮内容将默认为页码。
</li>
</ul>
<p>
  当提供字符串链接时，<code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>将使用
  常规的<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>元素，除非设置了 <code translate="no" class="notranslate text-nowrap">use-router</code>属性。
  当link（在array of objects表单中）是 <code translate="no" class="notranslate text-nowrap">to</code> location对象时，将自动生成路由器链接（如果检测到<code translate="no" class="notranslate text-nowrap">$router</code>）。
</p>
<p>
  使用数组格式时，链接字符串（和/或位置对象）用作as，并且<code translate="no" class="notranslate text-nowrap">基本url</code>属性将被忽略。
</p>
<div translate="translate" class="bd-example vue-example vue-example-pagination-nav-array notranslate">
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=1" class="page-link" role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="3" tabindex="0">1</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=2" class="page-link" role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="3" tabindex="-1">2</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=3" class="page-link" role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="3" tabindex="-1">3</a></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=1" class="page-link" role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="3" tabindex="0">One</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=2" class="page-link" role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="3" tabindex="-1">Two</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=3" class="page-link" role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="3" tabindex="-1">Three</a></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=1" class="page-link" role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="3" tabindex="0">Page 1</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=2" class="page-link" role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="3" tabindex="-1">Page 2</a></li>
<li role="presentation" class="page-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav?page=3" class="page-link" role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="3" tabindex="-1">Page 3</a></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">:pages</span>=<span class="hljs-string">"pages1"</span> <span class="hljs-attr">use-router</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">:pages</span>=<span class="hljs-string">"pages2"</span> <span class="hljs-attr">use-router</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">:pages</span>=<span class="hljs-string">"pages3"</span> <span class="hljs-attr">use-router</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  data() {
    <span class="hljs-keyword">return</span> {
      <span class="hljs-comment">// Simple array of strings</span>
      <span class="hljs-attr">pages1</span>: [<span class="hljs-string">'?page=1'</span>, <span class="hljs-string">'?page=2'</span>, <span class="hljs-string">'?page=3'</span>],
      <span class="hljs-comment">// Array of objects with string links</span>
      <span class="hljs-attr">pages2</span>: [
        { <span class="hljs-attr">link</span>: <span class="hljs-string">'?page=1'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'One'</span> },
        { <span class="hljs-attr">link</span>: <span class="hljs-string">'?page=2'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Two'</span> },
        { <span class="hljs-attr">link</span>: <span class="hljs-string">'?page=3'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Three'</span> }
      ],
      <span class="hljs-comment">// Array of objects with router `to` locations</span>
      <span class="hljs-attr">pages3</span>: [
        { <span class="hljs-attr">link</span>: { <span class="hljs-attr">query</span>: { <span class="hljs-attr">page</span>: <span class="hljs-number">1</span> } }, <span class="hljs-attr">text</span>: <span class="hljs-string">'Page 1'</span> },
        { <span class="hljs-attr">link</span>: { <span class="hljs-attr">query</span>: { <span class="hljs-attr">page</span>: <span class="hljs-number">2</span> } }, <span class="hljs-attr">text</span>: <span class="hljs-string">'Page 2'</span> },
        { <span class="hljs-attr">link</span>: { <span class="hljs-attr">query</span>: { <span class="hljs-attr">page</span>: <span class="hljs-number">3</span> } }, <span class="hljs-attr">text</span>: <span class="hljs-string">'Page 3'</span> }
      ]
    }
  }
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="customizing-appearance" class="bv-no-focus-ring"><span class="bd-content-title">自定义外观<a class="anchorjs-link" href="#customizing-appearance" aria-labelledby="customizing-appearance"></a></span></h2>
<h3 id="limiting-the-number-of-displayed-buttons" class="bv-no-focus-ring"><span class="bd-content-title">限制显示按钮的数量<a class="anchorjs-link" href="#limiting-the-number-of-displayed-buttons" aria-labelledby="limiting-the-number-of-displayed-buttons"></a></span></h3>
<p>
  要限制显示的页面按钮数（包括省略号，但不包括第一个、上一个、下一个和最后一个按钮），请使用<code translate="no" class="notranslate text-nowrap">limit</code>属性指定所需的页面按钮数（包括省略号，如果显示）。
  默认限制为<code translate="no" class="notranslate text-nowrap">5</code>。支持的最小值为<code translate="no" class="notranslate text-nowrap">3</code>。
  当<code translate="no" class="notranslate text-nowrap">limit</code>设置为3时，出于实际目的，不会显示省略号指示器。
</p>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">hide-goto-end-buttons</code>属性，可以选择隐藏 <code translate="no" class="notranslate text-nowrap">第一个</code>
  和 <code translate="no" class="notranslate text-nowrap">最后一个</code> 。
</p>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">隐藏省略号</code>属性，可以选择性地禁用<code translate="no" class="notranslate text-nowrap">省略号</code>的显示。
</p>
<h4 id="small-screen-support" class="bv-no-focus-ring"><span class="bd-content-title">小屏幕支持<a class="anchorjs-link" href="#small-screen-support" aria-labelledby="small-screen-support"></a></span></h4>
<p>
  在较小的屏幕（即移动屏幕）上，一些<code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>按钮将被隐藏，以最小化分页界面包装到多行的可能性：
</p>
<ul>
<li>
  省略号指示符将隐藏在 <code translate="no" class="notranslate text-nowrap">xs</code>或更小的屏幕上。
</li>
<li>页码按钮将限制为在<code translate="no" class="notranslate text-nowrap">xs</code>屏幕上最多可见3个或更小。</li>
</ul>
<p>这样可以确保不超过3个页码按钮以及“转到第一页”、“上一页”、“下一页”和“最后一页”按钮可见。</p>
<h3 id="button-content" class="bv-no-focus-ring"><span class="bd-content-title">按钮内容<a class="anchorjs-link" href="#button-content" aria-labelledby="button-content"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>支持多个道具/插槽，允许您自定义外观。
  所有的<code translate="no" class="notranslate text-nowrap">*-text</code>属性都是纯文本的，去掉了HTML，但是您可以使用它们相同名称的插槽对应项。
</p>
<p>
  有关所有可用插槽的完整列表，请参阅下面的<a href="#comp-ref-b-pagination-nav-slots" class="font-weight-bold">Slots</a>部分。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-appearance notranslate">
<div class="overflow-auto">
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">First</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">Prev</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">Next</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">Last</span></li>
</ul>
</nav>
<nav aria-hidden="false" class="mt-4">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">⏮</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">⏪</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">⏩</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">⏭</span></li>
</ul>
</nav>
<nav aria-hidden="false" class="mt-4">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link"><span class="text-success">First</span></span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link"><span class="text-danger">Prev</span></span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link"><i>1</i></a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link"><i>2</i></a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link"><i>3</i></a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link"><i>4</i></a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link"><span aria-hidden="true" class="spinner-grow spinner-grow-sm"></span> <span aria-hidden="true" class="spinner-grow spinner-grow-sm"></span> <span aria-hidden="true" class="spinner-grow spinner-grow-sm"></span></span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link"><span class="text-warning">Next</span></span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link"><span class="text-info">Last</span></span></li>
</ul>
</nav>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Use text in props --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
      <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span>
      <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
      <span class="hljs-attr">first-text</span>=<span class="hljs-string">"First"</span>
      <span class="hljs-attr">prev-text</span>=<span class="hljs-string">"Prev"</span>
      <span class="hljs-attr">next-text</span>=<span class="hljs-string">"Next"</span>
      <span class="hljs-attr">last-text</span>=<span class="hljs-string">"Last"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Use emojis in props --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
      <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span>
      <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
      <span class="hljs-attr">first-text</span>=<span class="hljs-string">"⏮"</span>
      <span class="hljs-attr">prev-text</span>=<span class="hljs-string">"⏪"</span>
      <span class="hljs-attr">next-text</span>=<span class="hljs-string">"⏩"</span>
      <span class="hljs-attr">last-text</span>=<span class="hljs-string">"⏭"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-4"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- Use HTML and sub-components in slots --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
      <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span>
      <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-4"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:first-text</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>&gt;</span>First<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:prev-text</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>&gt;</span>Prev<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:next-text</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:last-text</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-info"</span>&gt;</span>Last<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:ellipsis-text</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">small</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"grow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">small</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"grow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-spinner</span> <span class="hljs-attr">small</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"grow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-spinner</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:page</span>=<span class="hljs-string">"{ page, active }"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"active"</span>&gt;</span>{{ page }}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">v-else</span>&gt;</span>{{ page }}<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<p>
  slo<code translate="no" class="notranslate text-nowrap">页面</code>始终具有作用域，而slots <code translate="no" class="notranslate text-nowrap">first-text</code>, 
  <code translate="no" class="notranslate text-nowrap">prev-text</code>,
   <code translate="no" class="notranslate text-nowrap">next-text</code>和
   <code translate="no" class="notranslate text-nowrap">last-text</code>可以选择作用域。<code translate="no" class="notranslate text-nowrap">省略文本</code>槽没有作用域。
</p>
<p><strong>
  <code translate="no" class="notranslate text-nowrap">页面</code>可用的作用域变量属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">page</code></td>
<td>Number</td>
<td>
  页码（从<code translate="no" class="notranslate text-nowrap">1</code>到<code translate="no" class="notranslate text-nowrap">页码</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">index</code></td>
<td>Number</td>
<td>
  页码（从<code translate="no" class="notranslate text-nowrap">0</code>索引到页码 <code translate="no" class="notranslate text-nowrap">-1</code>）
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">active</code></td>
<td>Boolean</td>
<td>如果该页是活动页</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td>Boolean</td>
<td>如果页面按钮被禁用</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">content</code></td>
<td>String</td>
<td>
  默认内容，或<code translate="no" class="notranslate text-nowrap">页面生成</code>函数的结果
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>
  <code translate="no" class="notranslate text-nowrap">第一个文本</code>, 
  <code translate="no" class="notranslate text-nowrap">上一个文本</code>, 
  <code translate="no" class="notranslate text-nowrap">下一个文本</code>和 
  <code translate="no" class="notranslate text-nowrap">最后一个文本</code> 槽可用的作用域变量属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">page</code></td>
<td>Number</td>
<td>
  页码（从 <code translate="no" class="notranslate text-nowrap">1</code>到<code translate="no" class="notranslate text-nowrap">页码</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">index</code></td>
<td>Number</td>
<td>
  页码（从<code translate="no" class="notranslate text-nowrap">0</code>索引到页码<code translate="no" class="notranslate text-nowrap">-1</code>）
</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
<td>Boolean</td>
<td>如果页面按钮被禁用</td>
</tr>
</tbody>
</table>
</div>
<h3 id="goto-firstlast-button-type" class="bv-no-focus-ring"><span class="bd-content-title">转到第一个/最后一个按钮类型<a class="anchorjs-link" href="#goto-firstlast-button-type" aria-labelledby="goto-firstlast-button-type"></a></span></h3>
<p>
  如果希望有带有第一个和最后一个页码的按钮转到相应的页面，请使用<code translate="no" class="notranslate text-nowrap">第一个页码</code>和
  <code translate="no" class="notranslate text-nowrap">最后一个页码</code>属性。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-goto-first-last-number notranslate">
<div class="overflow-auto">
<div>
<h6>Goto first button number</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to previous page" href="#4" class="page-link">‹</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="100" tabindex="-1" href="#1" class="page-link">1</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="100" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="presentation" class="page-item active"><a role="menuitemradio" aria-label="Go to page 5" aria-checked="true" aria-posinset="5" aria-setsize="100" tabindex="0" href="#5" class="page-link">5</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 6" aria-checked="false" aria-posinset="6" aria-setsize="100" tabindex="-1" href="#6" class="page-link">6</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to next page" href="#6" class="page-link">›</a></li>
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to last page" href="#100" class="page-link">»</a></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Goto last button number</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to first page" href="#1" class="page-link">«</a></li>
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to previous page" href="#4" class="page-link">‹</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="100" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="presentation" class="page-item active"><a role="menuitemradio" aria-label="Go to page 5" aria-checked="true" aria-posinset="5" aria-setsize="100" tabindex="0" href="#5" class="page-link">5</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 6" aria-checked="false" aria-posinset="6" aria-setsize="100" tabindex="-1" href="#6" class="page-link">6</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 100" aria-checked="false" aria-posinset="100" aria-setsize="100" tabindex="-1" href="#100" class="page-link">100</a></li>
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to next page" href="#6" class="page-link">›</a></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Goto first and last button number</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to previous page" href="#4" class="page-link">‹</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="100" tabindex="-1" href="#1" class="page-link">1</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="100" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="presentation" class="page-item active"><a role="menuitemradio" aria-label="Go to page 5" aria-checked="true" aria-posinset="5" aria-setsize="100" tabindex="0" href="#5" class="page-link">5</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 6" aria-checked="false" aria-posinset="6" aria-setsize="100" tabindex="-1" href="#6" class="page-link">6</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 100" aria-checked="false" aria-posinset="100" aria-setsize="100" tabindex="-1" href="#100" class="page-link">100</a></li>
<li role="presentation" class="page-item"><a role="menuitem" tabindex="-1" aria-label="Go to next page" href="#6" class="page-link">›</a></li>
</ul>
</nav>
</div>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Goto first button number<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage"</span>
        <span class="hljs-attr">:number-of-pages</span>=<span class="hljs-string">"pages"</span>
        <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
        <span class="hljs-attr">first-number</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Goto last button number<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage"</span>
        <span class="hljs-attr">:number-of-pages</span>=<span class="hljs-string">"pages"</span>
        <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
        <span class="hljs-attr">last-number</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Goto first and last button number<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage"</span>
        <span class="hljs-attr">:number-of-pages</span>=<span class="hljs-string">"pages"</span>
        <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>
        <span class="hljs-attr">first-number</span>
        <span class="hljs-attr">last-number</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">pages</span>: <span class="hljs-number">100</span>,
        <span class="hljs-attr">currentPage</span>: <span class="hljs-number">5</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="button-size" class="bv-no-focus-ring"><span class="bd-content-title">按钮大小<a class="anchorjs-link" href="#button-size" aria-labelledby="button-size"></a></span></h3>
<p>
  通过将“<code translate="no" class="notranslate text-nowrap">size</code>”属性设置为“<code translate="no" class="notranslate text-nowrap">'sm'</code>”表示较小的按钮，
  或将“<code translate="no" class="notranslate text-nowrap">'lg'</code>”表示较大的按钮，可以选择从默认按钮大小更改为“<code translate="no" class="notranslate text-nowrap">'sm'</code>”。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-size notranslate">
<div class="overflow-auto">
<div>
<h6>Small</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination pagination-sm">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Default</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Large</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination pagination-lg">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h3 id="pill-style" class="bv-no-focus-ring"><span class="bd-content-title">Pill 样式<a class="anchorjs-link" href="#pill-style" aria-labelledby="pill-style"></a></span></h3>
<p>
  通过设置<code translate="no" class="notranslate text-nowrap">pills</code>属性轻松切换到pill样式按钮
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-pills notranslate">
<div class="overflow-auto">
<div>
<h6>Small Pills</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination pagination-sm b-pagination-pills">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Default Pills</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination b-pagination-pills">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6>Large Pills</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination pagination-lg b-pagination-pills">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Small Pills<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Default Pills<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Large Pills<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">pills</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<p><strong>注意:</strong> pill样式需要BootstrapVue的自定义CSS/SCSS。</p>
<h3 id="alignment" class="bv-no-focus-ring"><span class="bd-content-title">对齐<a class="anchorjs-link" href="#alignment" aria-labelledby="alignment"></a></span></h3>
<p>
  默认情况下，分页组件是左对齐的。通过将属性<code translate="no" class="notranslate text-nowrap">align</code>设置为适当的值，将align更改为 <code translate="no" class="notranslate text-nowrap">center</code>, 
  <code translate="no" class="notranslate text-nowrap">right</code> (
  <code translate="no" class="notranslate text-nowrap">right</code>是<code translate="no" class="notranslate text-nowrap">end</code>的别名）或fill。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-pagination-nav-alignment notranslate">
<div class="overflow-auto">
<div>
<h6>Left alignment (default)</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6 class="text-center">Center alignment</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination justify-content-center">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6 class="text-right">Right (end) alignment</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination justify-content-end">
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
<div class="mt-3">
<h6 class="text-center">Fill alignment</h6>
<nav aria-hidden="false">
<ul role="menubar" aria-disabled="false" aria-label="Pagination" class="pagination b-pagination text-center">
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to first page" aria-disabled="true" class="page-link">«</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="page-link">‹</span></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitemradio" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" href="#1" class="page-link">1</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitemradio" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" href="#2" class="page-link">2</a></li>
<li role="presentation" class="page-item flex-fill"><a role="menuitemradio" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" href="#3" class="page-link">3</a></li>
<li role="presentation" class="page-item flex-fill bv-d-xs-down-none"><a role="menuitemradio" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" href="#4" class="page-link">4</a></li>
<li role="separator" class="page-item disabled bv-d-xs-down-none flex-fill"><span class="page-link">…</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="page-link">›</span></li>
<li role="presentation" aria-hidden="true" class="page-item disabled flex-fill"><span role="menuitem" aria-label="Go to last page" aria-disabled="true" class="page-link">»</span></li>
</ul>
</nav>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-auto"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Left alignment (default)<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>Center alignment<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span>Right (end) alignment<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>Fill alignment<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-pagination-nav</span> <span class="hljs-attr">number-of-pages</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">base-url</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"fill"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-pagination-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h2 id="auto-current-page-detection-and-v-model-support" class="bv-no-focus-ring"><span class="bd-content-title">
  自动当前页检测和<code translate="no" class="notranslate text-nowrap">v-model</code>支持
  <a class="anchorjs-link" href="#auto-current-page-detection-and-v-model-support" aria-labelledby="auto-current-page-detection-and-v-model-support"></a></span>
</h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>将根据页面的当前URL或<code translate="no" class="notranslate text-nowrap">$route</code>（如果检测到路由器），
  尝试并自动检测哪个页面按钮应处于活动状态。如果无法检测到页面，则没有页码按钮处于活动状态，在单击页面按钮之前，第一个、上一个、下一个和最后一个按钮将处于禁用状态。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">v-model</code>是可选支持的（由输入事件更新，并绑定到值属性）。
  最初将<code translate="no" class="notranslate text-nowrap">v-model</code>设置为<code translate="no" class="notranslate text-nowrap">null</code>（默认值）将触发自动活动页面检测，
  随后将使用当前页码（从<code translate="no" class="notranslate text-nowrap">1</code>到页数的索引）进行更新。如果最初将<code translate="no" class="notranslate text-nowrap">v-model</code>设置为1或更大的值，
  则不会进行自动页面检测（直到用户单击页面按钮之后），<code translate="no" class="notranslate text-nowrap">v-model</code>指定的页面将设置为活动页面。
</p>
<p>
  要禁用自动活动页面检测，请将<code translate="no" class="notranslate text-nowrap">无页面检测</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>。
</p>
<p><strong>注意:</strong> 
  
  自动页面检测需要遍历所有可能的页面链接，直到检测到匹配。对于更多的页面，此检查可能需要一些时间，因此您可能希望通过<code translate="no" class="notranslate text-nowrap">v-model</code>和
  <code translate="no" class="notranslate text-nowrap">no-page-detect</code>属性手动控制哪个页面处于活动状态。
</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">可访问性<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>组件提供了许多支持辅助技术用户的功能，
  例如<code translate="no" class="notranslate text-nowrap">aria</code>属性和键盘导航。
</p>
<h3 id="aria-labels" class="bv-no-focus-ring"><span class="bd-content-title">ARIA标签<a class="anchorjs-link" href="#aria-labels" aria-labelledby="aria-labels"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>提供各种<code translate="no" class="notranslate text-nowrap">*-label-*</code>属性，
  用于设置组件中各个元素的<code translate="no" class="notranslate text-nowrap">aria-label</code>属性，这将帮助辅助技术的用户。
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th><code translate="no" class="notranslate text-nowrap">aria-label</code> 内容默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-first-page</code></td>
<td>"Goto first page"</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-prev-page</code></td>
<td>"Goto previous page"</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-next-page</code></td>
<td>"Goto next page"</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-last-page</code></td>
<td>"Goto last page"</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-page</code></td>
<td>"Goto page", 附页码</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">aria-label</code></td>
<td>"Pagination", 应用于外部分页容器</td>
</tr>
</tbody>
</table>
</div>
<p>
  <code translate="no" class="notranslate text-nowrap">label页面</code>可以选择接受一个函数来生成aria标签。函数被传递一个参数，即页码（从1到页数的索引）。
</p>
<p>
  您可以通过将prop设置为空字符串（<code translate="no" class="notranslate text-nowrap">''</code>）来移除任何标签，但不建议这样做，除非按钮的内容以文本形式传达其用途。
</p>
<h3 id="keyboard-navigation" class="bv-no-focus-ring"><span class="bd-content-title">键盘导航 <a class="anchorjs-link" href="#keyboard-navigation" aria-labelledby="keyboard-navigation"></a></span></h3>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-pagination-nav&gt;</code>支持现成的键盘导航，
  并遵循 <a href="https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex" target="_blank" rel="noopener">WAI-ARIA roving tabindex</a>模式。
</p>
<ul>
<li>切换到分页组件将自动聚焦当前活动页按钮</li>
<li>
  <kbd class="notranslate" translate="no">LEFT</kbd> (或 <kbd class="notranslate" translate="no">UP</kbd>)和 
  <kbd class="notranslate" translate="no">RIGHT</kbd> (或 <kbd class="notranslate" translate="no">DOWN</kbd>)箭头键将分别聚焦页面列表中的上一个和下一个按钮
</li>
<li>
  <kbd class="notranslate" translate="no">ENTER</kbd>或<kbd class="notranslate" translate="no">SPACE</kbd>键将选择（单击）当前聚焦的页面按钮
</li>
<li>
  按<kbd class="notranslate" translate="no">TAB</kbd>键将移动到页面上的下一个控件或链接，而按<kbd class="notranslate" translate="no">SHIFT</kbd>+<kbd class="notranslate" translate="no">TAB</kbd>键将移动到页面上的上一个控件或链接。
</li>
</ul>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<p>
  请参阅<a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">路由器支持</a>参考页以获取路由器链接特定的道具。
</p>
<p>
  对于组件的分页控制（例如<code translate="no" class="notranslate text-nowrap">&lt;b-table&gt;</code>），
  请改用<a href="../../../bootstrap-vue/docs/components/pagination" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-pagination&gt;</code></a>组件。
</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/pagination-nav#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-pagination-nav" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-pagination-nav&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/pagination-nav#comp-ref-b-pagination-nav" class="anchorjs-link" aria-labelledby="comp-ref-b-pagination-nav" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/pagination-nav/pagination-nav.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-pagination-nav-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-pagination-nav&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-pagination-nav-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-pagination-nav&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-pagination-nav-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-pagination-nav&gt;</code> Slots </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-pagination-nav-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-pagination-nav&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-pagination-nav-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/pagination-nav#comp-ref-b-pagination-nav-props" class="anchorjs-link" aria-labelledby="comp-ref-b-pagination-nav-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__879">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="disabled" class="" id="__BVID__879__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，将禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__879__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当前页码，从1开始</td>
</tr>
<tr role="row" data-pk="limit" class="" id="__BVID__879__row_limit">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">limit</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">5</code></td>
<td aria-colindex="4" role="cell" class="">要显示的最大按钮数（如果显示，则包括省略号，但不包括bookend按钮）</td>
</tr>
<tr role="row" data-pk="align" class="" id="__BVID__879__row_align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'left'</code></td>
<td aria-colindex="4" role="cell" class="">页面按钮的对齐方式：“开始”（或“左”）、“中心”、“结束”（或“右”）或“填充”</td>
</tr>
<tr role="row" data-pk="pills" class="" id="__BVID__879__row_pills">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">pills</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">对分页按钮应用pill样式</td>
</tr>
<tr role="row" data-pk="hide-goto-end-buttons" class="" id="__BVID__879__row_hide-goto-end-buttons">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-goto-end-buttons</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">Hides the goto first and goto last page buttons</td>
</tr>
<tr role="row" data-pk="aria-label" class="" id="__BVID__879__row_aria-label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-label</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Pagination'</code></td>
<td aria-colindex="4" role="cell" class="">隐藏“转到第一页”和“转到最后一页”按钮</td>
</tr>
<tr role="row" data-pk="label-first-page" class="" id="__BVID__879__row_label-first-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-first-page</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Go to first page'</code></td>
<td aria-colindex="4" role="cell" class="">要放入“转到第一页”按钮的“aria label”属性中的值</td>
</tr>
<tr role="row" data-pk="first-text" class="" id="__BVID__879__row_first-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">first-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'«'</code></td>
<td aria-colindex="4" role="cell" class="">“转到第一页”按钮中要放置的内容</td>
</tr>
<tr role="row" data-pk="first-number" class="" id="__BVID__879__row_first-number">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">first-number</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">显示第一个页码而不是转到第一个按钮</td>
</tr>
<tr role="row" data-pk="first-class" class="" id="__BVID__879__row_first-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">first-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">类应用于“转到第一页”按钮</td>
</tr>
<tr role="row" data-pk="label-prev-page" class="" id="__BVID__879__row_label-prev-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-prev-page</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Go to previous page'</code></td>
<td aria-colindex="4" role="cell" class="">要放入“转到上一页”按钮的“aria label”属性中的值</td>
</tr>
<tr role="row" data-pk="prev-text" class="" id="__BVID__879__row_prev-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">prev-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'‹'</code></td>
<td aria-colindex="4" role="cell" class="">“转到上一页”按钮中要放置的内容</td>
</tr>
<tr role="row" data-pk="prev-class" class="" id="__BVID__879__row_prev-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">prev-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">类应用于“转到上一页”按钮</td>
</tr>
<tr role="row" data-pk="label-next-page" class="" id="__BVID__879__row_label-next-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-next-page</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Go to next page'</code></td>
<td aria-colindex="4" role="cell" class="">要放入“转到下一页”按钮的“aria label”属性中的值</td>
</tr>
<tr role="row" data-pk="next-text" class="" id="__BVID__879__row_next-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">next-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'›'</code></td>
<td aria-colindex="4" role="cell" class="">“转到下一页”按钮中要放置的内容</td>
</tr>
<tr role="row" data-pk="next-class" class="" id="__BVID__879__row_next-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">next-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">类应用于“转到下一页”按钮</td>
</tr>
<tr role="row" data-pk="label-last-page" class="" id="__BVID__879__row_label-last-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-last-page</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Go to last page'</code></td>
<td aria-colindex="4" role="cell" class="">要放入“转到最后一页”按钮的“aria label”属性中的值</td>
</tr>
<tr role="row" data-pk="last-text" class="" id="__BVID__879__row_last-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">last-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'»'</code></td>
<td aria-colindex="4" role="cell" class="">“转到最后一页”按钮中要放置的内容</td>
</tr>
<tr role="row" data-pk="last-number" class="" id="__BVID__879__row_last-number">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">last-number</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">显示最后一个页码而不是转到最后一个按钮</td>
</tr>
<tr role="row" data-pk="last-class" class="" id="__BVID__879__row_last-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">last-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">类应用于“转到最后一页”按钮</td>
</tr>
<tr role="row" data-pk="label-page" class="" id="__BVID__879__row_label-page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-page</code></td>
<td aria-colindex="2" role="cell" class="">String or Function</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'Go to page'</code></td>
<td aria-colindex="4" role="cell" class="">要放入“转到页面”按钮的“aria label”属性中的值。页码将自动添加</td>
</tr>
<tr role="row" data-pk="page-class" class="" id="__BVID__879__row_page-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">page-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要应用于“转到页面”按钮的类</td>
</tr>
<tr role="row" data-pk="hide-ellipsis" class="" id="__BVID__879__row_hide-ellipsis">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">hide-ellipsis</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">不显示省略号按钮</td>
</tr>
<tr role="row" data-pk="ellipsis-text" class="" id="__BVID__879__row_ellipsis-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ellipsis-text</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'…'</code></td>
<td aria-colindex="4" role="cell" class="">要放置在省略号占位符中的内容</td>
</tr>
<tr role="row" data-pk="ellipsis-class" class="" id="__BVID__879__row_ellipsis-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ellipsis-class</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.3.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要应用于“省略号”占位符的类</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__879__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">呈现按钮的大小：“sm”、“md”（默认）或“lg”</td>
</tr>
<tr role="row" data-pk="number-of-pages" class="" id="__BVID__879__row_number-of-pages">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">number-of-pages</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">总页数</td>
</tr>
<tr role="row" data-pk="base-url" class="" id="__BVID__879__row_base-url">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">base-url</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'/'</code></td>
<td aria-colindex="4" role="cell" class="">自动生成页面链接时使用的基本URL</td>
</tr>
<tr role="row" data-pk="use-router" class="" id="__BVID__879__row_use-router">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">use-router</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">自动生成页面链接时，渲染路由器链接而不是链接</td>
</tr>
<tr role="row" data-pk="link-gen" class="" id="__BVID__879__row_link-gen">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">link-gen</code></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">链接生成器功能。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="page-gen" class="" id="__BVID__879__row_page-gen">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">page-gen</code></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">页码生成器功能。 有关详细信息，请参阅文档</td>
</tr>
<tr role="row" data-pk="pages" class="" id="__BVID__879__row_pages">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">pages</code></td>
<td aria-colindex="2" role="cell" class="">Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">页码和链接数组</td>
</tr>
<tr role="row" data-pk="no-page-detect" class="" id="__BVID__879__row_no-page-detect">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-page-detect</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用自动检测当前页面</td>
</tr>
<tr role="row" data-pk="active-class" class="" id="__BVID__879__row_active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  router-link属性：配置在链接处于活动状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“ active”</td>
</tr>
<tr role="row" data-pk="exact" class="" id="__BVID__879__row_exact">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  router-link属性：默认的活动类匹配行为是包含匹配。 设置此道具会强制模式与路线完全匹配</td>
</tr>
<tr role="row" data-pk="exact-active-class" class="" id="__BVID__879__row_exact-active-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">exact-active-class</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“ active”</td>
</tr>
<tr role="row" data-pk="no-prefetch" class="" id="__BVID__879__row_no-prefetch">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-prefetch</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  nuxt-link属性：为了提高Nuxt.js应用程序的响应速度，当链接将显示在视口中时，Nuxt.js将自动预取代码拆分页面。 设置“不预取”将禁用特定链接的此功能</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small">
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-pagination-nav&gt;</code>
  支持生成<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code>或 
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code>组件（如果使用nuxt.js）。
  有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">路由器支持</a>参考部分。
</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-pagination-nav-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/pagination-nav#comp-ref-b-pagination-nav-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-pagination-nav-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__929">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-pagination-nav-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Slots <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/pagination-nav#comp-ref-b-pagination-nav-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-pagination-nav-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__938">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">Slot 名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="first-text" class="" id="__BVID__938__row_first-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">first-text</code></td>
<td aria-colindex="2" role="cell" class="">“转到第一页”按钮内容。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="prev-text" class="" id="__BVID__938__row_prev-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">prev-text</code></td>
<td aria-colindex="2" role="cell" class="">“转到上一页”按钮内容。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="next-text" class="" id="__BVID__938__row_next-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">next-text</code></td>
<td aria-colindex="2" role="cell" class="">“转到下一页”按钮内容。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="last-text" class="" id="__BVID__938__row_last-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">last-text</code></td>
<td aria-colindex="2" role="cell" class="">“转到最后一页”按钮内容。可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="ellipsis-text" class="" id="__BVID__938__row_ellipsis-text">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">ellipsis-text</code></td>
<td aria-colindex="2" role="cell" class="">“…”指示器内容。未限定范围</td>
<td aria-colindex="3" role="cell" class=""></td>
</tr>
<tr role="row" data-pk="page" class="" id="__BVID__938__row_page">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">page</code></td>
<td aria-colindex="2" role="cell" class="">页码按钮内容。始终限定范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-pagination-nav-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title">事件<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/pagination-nav#comp-ref-b-pagination-nav-events" class="anchorjs-link" aria-labelledby="comp-ref-b-pagination-nav-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__953">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="input" class="" id="__BVID__953__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">page</code> - <span data-v-866a22e8="">所选页码（以1开头），如果找不到页，则为空</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当页面通过用户交互或编程方式更改时</td>
</tr>
<tr role="row" data-pk="change" class="" id="__BVID__953__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">page</code> - <span data-v-866a22e8="">所选页码（从1开始）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">当页面通过用户交互更改时</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">导入单个组件<a href="../../../bootstrap-vue/docs/components/pagination-nav#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 可以通过以下命名导出将各个组件导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__965">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组成部分</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-pagination-nav&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BPaginationNav</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BPaginationNav } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-pagination-nav'</span>, BPaginationNav)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">作为Vue.js插件导入<a href="../../../bootstrap-vue/docs/components/pagination-nav#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__975">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">PaginationNavPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { PaginationNavPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(PaginationNavPlugin)</pre></figure>





</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
